<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>操作日志</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <!--搜索栏开始-->
        <card class="mb-10">
          <div class="normal-list-page-hd clearfix">
            操作人：
            <Input v-model="search_key_words" placeholder="操作人" class="mr-10" style="width: 200px"/>
            <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="get_logs_by_keywords">查询</Button>
          </div>
        </card>

        <!--内容列表栏开始-->
        <div class="mb-20">
          <Table stripe :loading="loading_list" :columns="log_columns" :data="list_data"></Table>
        </div>
        <!--内容列表栏结束-->

        <!--分页工具栏开始-->
        <div>
          <Page style="right" :total="data_count" show-total :page-size="limit" @on-change="changepage" @on-page-size-change="onPageSizeChange" show-elevator show-sizer></Page>
        </div>
        <!--分页工具栏结束-->
      </div>
    </div>
  </div>
</template>
<script>
import { getLogs } from "../../api/base_sys/base_manager";
import Vue from 'vue'

export default {
  data () {
    return {
      search_key_words: "",
      loading_list: false,
      data_count: 0,
      current_page: 1,
      limit: 10,
      list_data: [],
      log_columns: [
        {
          title: "序号",
          align: 'center',
          key: "id",
          width: 80
        },
        {
          title: "数据",
          align: 'center',
          minWidth:80,
          key: "data",
          render: (h, params) => {
            return h(
              "Poptip",
              {
                props: {
                  trigger: "hover",
                  title: "操作数据",
                  placement: "bottom-start"
                }
              },
              [
                h("Tag", "查看"),
                h("div",
                  {
                    slot: "content"
                  },
                  params.row.data
                )
              ]
            );
          },
          minWidth:100,
        },
        {
          title: "操作",
          align: 'center',
          key: "method",
          render: (h, params) => {
            const row = params.row;
            const color = row.method === "update" ? "blue" : row.method === "add" ? "green" :row.method === "delete" ? "red":"black";
            const text = row.method === "update" ? "修改" : row.method === "add" ? "新增" :row.method === "delete"? "删除":row.method;
            return h("Tag",
              {
                props: {
                  color: color
                }
              },
              text
            );
          },
          minWidth:100,
        },
        {
          title: "操作时间",
          key: "crtTime",
          align: 'center',
          minWidth:100,
        },
        {
          title: "操作人ID",
          align: 'center',
          key: "crtUser",
          minWidth:100,
        },
        {
          title: "操作人",
          align: 'center',
          key: "crtName",
          minWidth:100,
        },
        {
          title: "操作主机",
          align: 'center',
          key: "crtHost",
          minWidth:100,
        },
        {
          title: "资源路径",
          align: 'center',
          minWidth:200,
          key: "url"
          // width: 220
        },
      ]
    };
  },
  methods: {
    /**
     * 获取用户列表数据
     */
    renderTableList () {
      const that = this;
      this.loading_list = true;
      getLogs({
        page: this.current_page,
        limit: this.limit,
        crtName: this.search_key_words,
      }).then(function (rs) {
        if (rs.data) {
          that.list_data = rs.data.list;
          that.data_count = rs.data.totalRecord;
          that.loading_list = false;
        }
      });
    },
    /**
     * 页面跳转
     */
    changepage (index) {
      this.current_page = index;
      this.renderTableList();
    },
    /**
     * 切换每页显示条数
     */
    onPageSizeChange(num) {
      this.current_page = 1;
      this.limit = num;
      this.renderTableList();
    },
    /**
     * 搜索用户操作
     */
    get_logs_by_keywords () {
      this.data_count = 0;
      this.current_page = 1;
      this.renderTableList();
    }
  },
  /**
   * 页面加载完成执行
   */
  created() {
    this.renderTableList();
  }
};
</script>
